* {
    list-style: none;
    padding: 0;
}

.wrapper {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
}

#pic {
    background-color: antiquewhite;
}

#pic li {
    display: none;
    z-index: 1;
}

#pic li:nth-child(2) {
    display: block;
}

#num {
    position: absolute;
    margin-top: -50px;
    margin-left: 540px;
    /* background-color: rgb(83, 83, 87); */
    z-index: 2;
}

#num>li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 0 7px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    /* background-color: white; */
    border: 1px solid #ffffff;
    line-height: 13px;
    background: transparent;
}

#num .active {
    background-color: #fefefe;
}

.btn {
    z-index: 3;
    height: 40px;
    width: 30px;
    position: absolute;
    top: 130px;
    line-height: 40px;
    /*background: rgba(0, 0, 0, 0.3);
    */
    color: #fefefe;
    text-align: center;
    border-radius: 25%;
    display: none;
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    -ms-border-radius: 25%;
    -o-border-radius: 25%;
}

.wrapper:hover .btn {
    display: block;
    background: rgba(150, 148, 148, 0.7);
}

.btn_left {
    left: 486px;
}

.btn_right {
    right: 486px;
}

.btn:active {
    animation: change;
    animation-duration: 10s;
    animation-timing-function: linear;
}

@keyframes change {
    from {
        background-color: #adadad;
    }
    to {
        background-color: aliceblue;
    }
}